<!--
 * @Description: 异常管理-查看异常
 * @Autor: 曹敬涛
 * @Date: 2021-08-09 15:45:18
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-16 16:27:35
-->
<div class="ex-management">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>查看异常</span>
                </h3>
            </div>
        </div>
    </div>
    <div class="management">
        <div class="ui-g" style="height: 100%;">
            <div class="ui-g-4" style="border-right: 10px solid #eee;height: 780px;">
                <!-- 查询框 -->
                <div class="query-box">
                    <span class="ui-float-label quality-dept">
                        <span class="text">型号</span>
                        <p-dropdown name="model" #modelSelect="ngModel" [options]="modelList"
                            [(ngModel)]="queryInfoLeft.model" [filter]="true" placeholder="请选择" (onChange)="getLotNoList($event)">
                        </p-dropdown>
                    </span>
                    <span class="ui-float-label quality-dept">
                        <span class="text">发次</span>
                        <p-dropdown name="lotNo" #lotNoSelect="ngModel" [options]="lotNoList"
                            [(ngModel)]="queryInfoLeft.lotNo" placeholder="请选择">
                        </p-dropdown>

                    </span>

                    <p-button class="query-btn" (click)="getDesigenTree()" label="查询"></p-button>

                </div>
                <div style="height: 90%;overflow: auto">
                    <p-tree *ngIf="files2.length !=0" [value]="files2" selectionMode="single"
                        [(selection)]="selectedFiles1" (onNodeSelect)="nodeSelect($event)">
                        <ng-template let-node pTemplate="default">
                            <img class="imgcontent" src="../../../assets/common/images/三级图标.png"
                                *ngIf="node.nodeLevel==8||node.nodeLevel==9" width="20" height="20" />
                            <img class="imgcontent" src="../../../assets/common/images/0.png"
                                *ngIf="node.nodeLevel==undefind" width="20" height="20" />
                            <img class="imgcontent" src="../../../assets/common/images/1.png" *ngIf="node.nodeLevel==1"
                                width="20" height="20" />
                            <img class="imgcontent" src="../../../assets/common/images/2.png" *ngIf="node.nodeLevel==2"
                                width="20" height="20" />
                            <img class="imgcontent" src="../../../assets/common/images/3.png" *ngIf="node.nodeLevel==3"
                                width="20" height="20" />
                            <img class="imgcontent" src="../../../assets/common/images/4.png" *ngIf="node.nodeLevel==4"
                                width="20" height="20" />
                            <img class="imgcontent" src="../../../assets/common/images/5.png" *ngIf="node.nodeLevel==5"
                                width="20" height="20" />
                            <span
                                *ngIf="node.key==-1">{{node.model}}-{{node.lotNo}}-{{node.nodeDrawingNo}}-{{node.nodeName}}-{{node.stageSign}}</span>
                            <span *ngIf="node.key!=-1">{{node.nodeDrawingNo}}-{{node.nodeName}}</span>
                            <span class="ptagisRelation"
                                *ngIf="node.isRelation==1&&node.isExport!=1">{{node.isRelation==1?'已关联':''}}</span>
                            <span class="ptagisExport" *ngIf="node.isExport==1">{{node.isExport==1?'已导出':''}}</span>
                        </ng-template>
                    </p-tree>
                    <div *ngIf="files2.length ==0">请先选择型号和发次</div>
                </div>
            </div>
            <div class="ui-g-8" style="height: 780px;">
                <!-- 查询框 -->
                <!-- <div class="query-box">
                    <span class="ui-float-label quality-dept">
                        <span class="text">统计时间</span>
                        <p-calendar [(ngModel)]="rangeDates" selectionMode="range" [readonlyInput]="true"></p-calendar>
                    </span>
                    <p-button label="查询" (click)="getDescList()" class="query-btn"></p-button>
                    <p-button type="button" label="重置" class="reset-btn"></p-button>
                </div> -->
                <!-- 未关闭异常分布 -->
                <div class="abnormal-item" *ngIf="checkTitle">
                    <div class="distribution-item">
                        <div class="number">{{checkTitle.closePercent}}%</div>
                        <div>异常关闭率</div>
                    </div>
                    <div class="distribution-item">
                        <div class="number color0000FF">{{checkTitle.totalCount}}</div>
                        <div>异常总数量</div>
                    </div>
                    <div class="distribution-item">
                        <div class="number colorCC6600">{{checkTitle.notCompleteCount}}</div>
                        <div>未关闭数量</div>
                    </div>
                    <!-- <div class="distribution-list">
                        <div class="abnormal-distribution">未关闭异常分布：</div>
                        <div class="flex-start">
                            <div class="abnormal-distribution-item" *ngFor="let item of distribution">
                                <div class="colorCC6600">{{item.quantity}}</div>
                                <div>{{item.department}}</div>
                            </div>
                        </div>

                    </div> -->

                </div>
                <!-- 列表 -->
                <div class=" m-portlet__body" style="margin-top: 15px;">
                    <div class="primeng-datatable-container">
                        <p-table #dataTable [value]="primengTableHelper.records"
                            rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                            [paginator]="false" [lazy]="true" [scrollable]="true"
                            [responsive]="primengTableHelper.isResponsive"
                            [resizableColumns]="primengTableHelper.resizableColumns">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width: 120px">操作</th>

                                    <th style="width: 80px">序号</th>
                                    <th style="width: 110px">异常单号</th>
                                    <th style="width: 110px">创建时间</th>
                                    <th style="width: 110px">任务编号</th>
                                    <th style="width: 110px">一级异常</th>
                                    <th style="width: 110px">二级异常</th>
                                    <th style="width: 110px">异常描述</th>
                                    <th style="width: 110px">异常等级</th>
                                    <th style="width: 110px">状态</th>
                                    <th style="width: 110px">提报人</th>
                                    <th style="width: 110px">处理角色</th>
                                    <th style="width: 110px">责任部门</th>
                                    <th style="width: 110px">处理人</th>
                                    <th style="width: 110px">处理完成时间</th>
                                    <th style="width: 110px">确认时间</th>
                                    <th style="width: 110px">耗费工时</th>
                                    <th style="width: 120px">操作</th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-rowIndex="rowIndex" let-car>
                                <tr>
                                    <td style="width: 120px">
                                        <div class="btn-group dropdown" dropdown container="body">
                                            <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                                                <i class="fa fa-cog"></i><span class="caret"></span> 操作
                                            </button>
                                            <ul class="dropdown-menu" *dropdownMenu>
                                                <li>
                                                    <a *ngIf="'Pages.ViewExceptions.Resume' | permission" href="javascript:;" (click)="getOperationLogList(car.id)">履历</a>
                                                </li>
                                                <li>
                                                    <a *ngIf="'Pages.ViewExceptions.See' | permission" href="javascript:;" (click)="seeDetail(car)">查看</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td style="width: 80px">{{rowIndex+1}}</td>
                                    <td style="width: 110px">{{car.code}}</td>
                                    <td style="width: 110px">{{car.creationTime | date:'yyyy-MM-dd'}}</td>
                                    <td style="width: 110px">{{car.taskCode}}</td>
                                    <td style="width: 110px">{{car.inspectionTypeDesc}}</td>
                                    <td style="width: 110px">{{car.inspectionItemInfo}}</td>
                                    <td style="width: 110px">{{car.inspectionDetails}}</td>
                                    <td style="width: 110px">{{car.inspectionSeverityDesc}}</td>
                                    <td style="width: 110px">{{car.state | exState}}</td>
                                    <td style="width: 110px">{{car.submitter}}</td>
                                    <td style="width: 110px">{{car.roles}}</td>
                                    <td style="width: 110px">{{car.organizationUnits}}</td>
                                    <td style="width: 110px">{{car.handler}}</td>

                                    <td style="width: 110px">{{car.completeTime | date:'yyyy-MM-dd'}}</td>
                                    <td style="width: 110px">{{car.confirmTime | date:'yyyy-MM-dd'}}</td>
                                    <td style="width: 110px">{{car.costTime }}</td>

                                </tr>
                            </ng-template>
                        </p-table>
                        <div class="primeng-paging-container">
                            <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                [totalRecords]="primengTableHelper.totalRecordsCount"
                                (onPageChange)="getDescList($event)"
                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
               
            </div>
        </div>
    </div> -->

    <!-- 异常履历 -->
    <p-dialog [style]="{width: '60%', height: '50%',background:'#fff'}" header="异常履历" [(visible)]="resumeVisible"
        modal="modal" [responsive]="true">

        <p-steps [(activeIndex)]="activeIndex" [model]="logList"></p-steps>
        <div class="resume-list">
            <div *ngFor="let item of logList ; let i = index" class="resume-item">
                <div class="yes-active" *ngIf="i === activeIndex">
                    <div>{{item.content}}</div>
                    <div>{{item.creationTime | date:'yyyy-MM-dd'}}</div>
                </div>
                <div class="no-active" *ngIf="i !== activeIndex">
                    <div>{{item.content}}</div>
                    <div>{{item.creationTime | date:'yyyy-MM-dd'}}</div>
                </div>

            </div>
        </div>


        <p-footer>
            <button type="button" pButton icon="fa-close" label="完成"></button>
        </p-footer>
    </p-dialog>
    <!-- 查看详情 -->
    <p-dialog header="查看详情" [(visible)]="sureVisible" modal="modal" [responsive]="true" (onHide)="onHideSureVisible()">
        <form #setExceptionForm="ngForm" novalidate class="add-form" autocomplete="off">
            <div>
                <span class="p-field ml">
                    <span class="input-lable" style="margin-right: 5px;margin-left: 10px;">创建时间：</span>
                    <input [(ngModel)]="addInfoUi.creationTime" name="creationTime" disabled>

                </span>
                <span class="p-field ml">
                    <span class="input-lable" style="margin-right: 5px;margin-left: 10px;">异常单号：</span>
                    <input [(ngModel)]="addInfoUi.code" name="code" disabled>

                </span>
                <br />
                <span class="p-field ml">
                    <span class="input-lable" style="margin-right: 5px;margin-left: 10px;">一级异常：</span>

                    <input [(ngModel)]="addInfoUi.inspectionTypeDesc" name="inspectionTypeDesc" disabled>
                </span>
                <span class="p-field ml">
                    <span class="input-lable" style="margin-right: 5px;margin-left: 10px;">二级异常：</span>
                    <input [(ngModel)]="addInfoUi.inspectionItemInfo" name="inspectionItemInfo" disabled>
                </span>
                <br />
                <span class="p-field ml">
                    <span class="input-lable" style="margin-right: 5px;margin-left: 10px;">异常等级：</span>
                    <input [(ngModel)]="addInfoUi.inspectionSeverityDesc" name="inspectionSeverityDesc" disabled>
                </span>
                <span class="p-field ml">
                    <span class="input-lable" style="margin-right: 5px;margin-left: 10px;">提 报 人：</span>
                    <input [(ngModel)]="addInfoUi.submitter" name="submitter" disabled>

                </span>

                <div class="p-field ml">
                    <span class="input-lable" style="margin-right: 5px;margin-left: 10px;">异常描述：</span>
                    <input type="text" [(ngModel)]="addInfoUi.inspectionDetails" name="inspectionDetails" disabled>
                </div>
                <!-- <p-lightbox class="images-list" [images]="images"></p-lightbox> -->
                <div class="p-field ml">
                    <span class="input-lable" style="margin-right: 5px;margin-left: 10px;">原因分析：</span>
                    <input [(ngModel)]="addInfoUi.causeAnalysis" name="causeAnalysis" disabled>
                </div>
                <div class="p-field ml" style="margin-bottom: 10px;">
                    <span class="input-lable" style="margin-right: 5px;margin-left: 10px;">处理措施：</span>
                    <input [(ngModel)]="addInfoUi.treatmentMeasures" name="treatmentMeasures" disabled>
                </div>
                <div class="p-field ml" style="margin-bottom: 10px;">
                    <span class="input-lable" style="margin-right: 5px;margin-left: 10px;">处理人：</span>
                    <input [(ngModel)]="addInfoUi.handler" name="handler" disabled>
                </div>
                <div class="p-field  ml" style="margin-bottom: 10px;">
                    <span class="input-lable" style="margin-right: 5px;margin-left: 10px;">处理完成时间：</span>
                    <input [(ngModel)]="addInfoUi.completeTime" name="handleTime" disabled>

                </div>
                <p-fileUpload customUpload="true" chooseLabel="请选择上传图片" [disabled]="true" [(files)]="uploadedFiles"
                    multiple="false" auto="auto" accept="image/*" maxFileSize="1000000">
                    <ng-template let-file pTemplate="file">
                        <div class="ui-fileupload-files ng-star-inserted">
                            <div class="ng-star-inserted">
                                <div class="ui-fileupload-row ng-star-inserted">
                                    <a target="_blank"
                                    [href]="file.objectURL">
                                        <img [src]="file.objectURL"  width="50" class="ng-star-inserted">
                                    </a>
                                    <div> {{file.name}}</div>
                                    <!-- <div>{{file.size}}</div> -->
                                </div>
                            </div>
                        </div>
                    </ng-template>
                </p-fileUpload>

            </div>
            <div class="modal-footer">

                <button type="button" pButton icon="fa-close" (click)="sureVisible = false" label="取消"></button>

            </div>
        </form>


    </p-dialog>
</div>